import Nav from '../../src/components/common/nav/nav.vue'
import {ApiUrl,Islogined,returnId,show,hide} from './ApiUrl.js'
import loading from '../../src/components/common/loading/loading.vue'
import fangerror from '../../src/components/common/fangerror/fangerror.vue'
import Swiper from '../plugins/swiper4x/swiper.min'
import {timerScale} from '../plugins/scale/self_adaption_scale'
import {phasesData} from "../plugins/mui/mater.data";
require("./lib/select2/js/select2.min");
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

export default {
  components: {
    meun:Nav,loading,fangerror,
  },
  data(){
    return {
      FangLoading:false,//Loading控制，true显示，false不显示
      fangerroring:false,//提示文本弹窗，true显示，false不显示
      fangerrorText:'',//提示文本弹窗内容
      headerTitle:'指标详情',
      contentTitle:'',
      featureDate:'',
      isRed: false,  //返回按钮
      featureData:[], //接收数据数组
      featureArr:[], //接收数据数组
      tableLength:[], //接收数据数组
      integrationId:null,  //	综合指标id
      mainMatId:null,  //主材id
      collected:null,  //收藏
      page:1,  //表格页码
      noDataShow:[true,true],   //无数据时的展示
      noDataText:'暂无数据...',   //无数据时的展示
    }
  },
  created: function() {

  },
  mounted(){
    timerScale();
    $('.select2-dropdown').remove();
    $('select').select2({
      language: "zh-CN",
    });
    let windowH = $(window).height();
    let meunBoxH = $('.meunBox').outerHeight(true);
    let megessBoxH = $('.megessBox').outerHeight(true);
    $('.contentLeft,.contentRight').height( windowH - meunBoxH - megessBoxH );
    $('.tab_box').height(windowH - meunBoxH);

    this.lineChart();
    // this.chooseTime();
  },
  beforeDestroy(){  //实例销毁之前调用
    window.removeEventListener('resize',this.chartResize);  //移除监听事件
  },
  methods:{
    setTimeoutError:function () {
      setTimeout(() => {
        $('.Fang_errorBox').hide();
        this.fangerroring = false
      }, 2000)
    },
    chartResize : function () {  //图表自适应
      let _This = this;
      setTimeout(function () {
        _This.chart.resize();
      }, 200)
    },
    lineChart:function(){
      let _This = this;
      _This.mainMatId = _This.$route.query.id;  //接收传过来的参数
      let params = {
        id : _This.mainMatId,
        page:_This.page,
        pageSize:10,
        showType:4
      };
      _This.dataAjax(params,function (data) {
        // console.log(data);
        let echartDom = document.getElementById('featureEchart');
        if(echartDom == null) return;
        let mainMaterialsAttrInfo = data.mainMaterialsAttrInfo;
        _This.contentTitle = mainMaterialsAttrInfo.name + '行情走势';   //特征名字
        if(data.lineData == '' || data.lineData == null){   //判断数据是否为空
          _This.noDataShow[0] = false;
          _This.noDataShow[1] = false;
        }
        for(let key in mainMaterialsAttrInfo){
          _This.integrationId = mainMaterialsAttrInfo['integrationId'];    //获取综合id
          _This.collected = mainMaterialsAttrInfo['collected']   //收藏状态
        }
        _This.featureData = data;   //表格数据
        let xAxisData = [];  //折线图数据
        let seriesData = [];
        for(let i=0;i<_This.featureData['lineData'].length;i++){
          let data = _This.featureData['lineData'][i];
          let timeData = '';
          let chartTimeData = '';
          let years = data.times.toString().substring(0,4);  //切割年份
          let moons = data.times.toString().substring(data.times.toString().length-2);  //切割月份
          let parseNum = parseFloat(moons);  //转化为数字类型
          if(parseNum<4){
            // timeData = years + '第一季度';
            chartTimeData = years+'年' + 'Q1';
          }else if(3<parseNum && parseNum<7){
            // timeData = years + '第二季度';
            chartTimeData = years+'年' + 'Q2';
          }else if(6<parseNum && parseNum<10){
            // timeData = years + '第三季度';
            chartTimeData = years+'年' + 'Q3';
          }else if(9<parseNum && parseNum<13){
            // timeData = years + '第四季度';
            chartTimeData = years+'年' + 'Q4';
          }
          xAxisData.push(chartTimeData);   //x轴数据
          seriesData.push(data.avgNowPrice.toFixed(2));  //y轴数据
        }
        _This.chart = _This.$echarts.init(echartDom);
        _This.chart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: 0,
            right: 0,
            top:'10%',
            bottom: 0,
            containLabel: true
          },
          color:['#fff'],
          xAxis: {
            type: 'category',
            splitLine: false,
            axisLine:false,
            axisLabel:{
              textStyle:{
                color:'#fff'
              }
            },
            axisTick:false,
            data: xAxisData
          },
          yAxis: {
            type: 'value',
            splitLine: false,
            axisLine:false,
            axisLabel:false,
            axisTick:false
          },
          series: [{
            data: seriesData,
            type: 'line',
            smooth: true
          }]
        });  //加载图表
        _This.chartResize();
        window.addEventListener("resize",_This.chartResize); //图表自适应
      })
    },
    backDetail:function () {  //返回
      this.isRed = true;  //返回按钮变红色
      /*this.$router.push({path: 'detail'});*/
      this.$router.back(-1);
    },
    BindTapMaterPicker:function () {
      var materPicker = new mui.PopPicker();
      materPicker.setData(phasesData());
      materPicker.show(function(items) {  //弹窗回调
        //返回 false 可以阻止选择框的关闭
        //return false;
      });
    },
    topCollect:function () {  //顶部收藏
      let _This = this;
      _This.collected = !_This.collected;
      let params = {
        integrationId:_This.integrationId,  //综合指标id
        mainMatId:_This.mainMatId,   //主材id
        collected:_This.collected  //收藏
      };
      if( _This.collected == true){
        _This.topCollectAjaxs(params,function () {  //发送请求
          mui.confirm('收藏成功','提示',['确定'],function (e) {   //提示弹窗

          })
        })
      }else {
        _This.topCollectAjaxs(params,function () {  //发送请求
          mui.confirm('取消收藏','提示',['确定'],function (e) {   //提示弹窗

          })
        })
      }
    },
    //表格上拉加载更多
    infinite(done) {
      let _This = this;
      if(this.noData) {
        setTimeout(() => {
          _This.$refs.indexsublist.finishInfinite(2);
        });
        return;
      }
      _This.page =  _This.page + 1;
      setTimeout(() => {
        _This.$nextTick(()=>{
          if(_This.featureData['lineData'].length >= 10){
            let params = {
              id:_This.mainMatId,
              page:_This.page,
              pageSize:10
            };
            _This.dataAjax(params,function (data) {   //上拉时发送请求
              if(data=='' || data == null){
                done(true);//没有更多数据
              }else {
                done();
              }
              if(_This.featureData['lineData'] == ''){
                _This.featureData['lineData'] = data;
              }else {
                for(let key in data){
                  _This.featureData['lineData'].push(data[key]);
                }
              }
            });
          }
        })
      }, 500)
      //回调选中数据 specialtyCode,indexType,parent,page,pageSize,fn

    },
    dataAjax:function (params,fn) {
      let _This = this;
      _This.FnAxiosAjax('post','/api/matfeatures/detail',params,function (data) {
        !! fn && fn(data.results);
        _This.tableLength = data.totalCount    //数据总条数
      })
    },
    topCollectAjaxs:function (params,fn) {
      this.FnAxiosAjax('post','/api/matfeatures/matcollect',params,function (data) {
        !! fn && fn(data);
      })
    }
  },
}
